<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="任务名称" prop="task_name">
            <el-input v-model="queryParams.task_name" placeholder="请输入任务全称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="流程名称" prop="process_name">
            <el-input v-model="queryParams.process_name" placeholder="请输入流程全程" />
          </el-form-item>
        </el-col>
       <el-col :span="4">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-loading="loading" :data="TaskList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" align="center" />
      <el-table-column label="任务名称" align="center" prop="task_name" />
      <el-table-column label="流程实例编号" align="center" prop="process_instance_id" />
      <el-table-column label="执行实例编号" align="center" prop="execution_id" />
      <el-table-column label="业务号" align="center" prop="business_key" />
      <el-table-column label="流程名称" align="center" prop="process_name" />
      <el-table-column label="发起人" align="center" prop="starter" />
      <el-table-column label="办理人" align="center" prop="assignee" />
      <el-table-column label="任务创建时间" align="center" prop="create_time" />
      <el-table-column label="流程启动时间" align="center" prop="start_time" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-edit" @click="handleLeaveApply(scope.row)"
              v-hasPermi="['bd:partner:edit']">办理
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 办理请假对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="660px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="请假人" prop="user_id">
              <el-input v-model="form.user_id" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请假类型" prop="leave_type">
              <!-- <el-input v-model="form.leave_type" :readonly="isReadonly"/> -->
              <el-select
                v-model="form.leave_type"
                :readonly="isReadonly"
                placeholder="请选择请假类型"
                clearable
              >
                <el-option
                  v-for="dict in dict.type.bd_leave_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="起始时间" prop="start_time">
              <el-date-picker
                v-model="form.start_time"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-DD HH:mm:ss"
                type="datetime"
                placeholder="请选择起始日期" :readonly="isReadonly">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="end_time">
              <el-date-picker
                v-model="form.end_time"
                format="yyyy-MM-DD HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="请选择结束日期" :readonly="isReadonly">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="原因" prop="reason">
              <el-input v-model="form.reason" type="textarea" placeholder="请输入请假原因" :readonly="isReadonly"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="人事" prop="hr">
              <el-select
                v-model="form.hr" :disabled="hrIsDisabled"
                clearable
              >
                <el-option
                  v-for="(item,index) in deptLeaderList"
                  :key="index"
                  :label="item.user_name"
                  :value="item.user_name">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批结果" prop="is_result" >
              <el-radio-group v-model="form.is_result" disabled v-if="optType=='view'">
                <el-radio
                  v-for="dict in dict.type.bd_leave_result"
                  :key="dict.value"
                  :label="dict.value"
                  :disabled="resultIsDisabled"
                >{{dict.label}}</el-radio>
              </el-radio-group>
              <el-radio-group v-model="form.is_result" v-else>
                <el-radio
                  v-for="dict in dict.type.bd_leave_result"
                  :key="dict.value"
                  :label="dict.value"
                  :disabled="resultIsDisabled"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="审批意见" prop="suggestion">
              <el-input v-model="form.suggestion" :disabled="suggestionIsDisabled" type="textarea" placeholder="请输入审批意见" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="showRow">
          <el-col :span="12">
            <el-form-item label="是否重新申请" prop="reapply">
              <el-radio-group v-model="form.reapply" disabled v-if="optType=='view'">
                <el-radio
                  v-for="dict in dict.type.bd_leave_reapply"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
              <el-radio-group v-model="form.reapply" v-else>
                <el-radio
                  v-for="dict in dict.type.bd_leave_reapply"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" round @click="submitForm">提交</el-button>
        <el-button type="danger" round  @click="forceEnd" :disabled="forceEndIsDisabled">撤销</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listTask,
    leaderApproval,
    personnelApproval,
  } from "../api/task";
  import {
    getLeaveApplyById,
    listDeptLeader,
    destroyApply,
    reApply,
    applyRevoke,
    applyReject,
  } from "../api/leave";
  export default {
    name: "Task",
    dicts: ['bd_leave_type','bd_leave_result','bd_leave_reapply'],
    data() {
      return {
        optType: undefined,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //部门领导列表
        deptLeaderList: [],
        //查询申请时间范围
        dateRangeTime: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          task_name: null,
          process_name: null,
        },
        user_ids: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {

        },
        hrIsDisabled: false,
        resultIsDisabled: false,
        suggestionIsDisabled: false,
        forceEndIsDisabled: false,
        //rebutIsDisabled: false,
        isReadonly: true,
        showRow: false,
      };
    },
    created() {
      this.queryParams= this.$route.query;//传递路由上的参数进行分类查询
      this.getList();
      this.getDeptLeaderList();
    },
    methods: {
      /** 查询待办事物列表 */
      getList() {
        this.loading = true;
        listTask(this.queryParams).then(response => {
          this.TaskList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /* 查询部门领导列表*/
       getDeptLeaderList(){
         this.loading = true;
         listDeptLeader().then(response => {
           this.deptLeaderList = response.rows;
           this.total = response.total;
           this.loading = false;
         });
       },
      // 取消按钮
      cancel() {
        this.open = false;
        this.openPrivilege = false;
        this.reset();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      // 表单重置
      reset() {
        this.form = {
          task_name: null,
          process_name: null,
        };
        this.resetForm("form");
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.task_name=null;
        this.queryParams.process_name=null;
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 办理请假按钮操作 */
      //请假流程图中包含众多流程节点，每个流程节点对应的处理页面也是不同的
      handleLeaveApply(row) {
        this.reset();
        this.title = row.task_name;
        if(this.title=="发起请假申请"){
          this.isReadonly = false;
          this.forceEndIsDisabled = false;
        }else if(this.title=="部门领导审批"){
          this.showRow = false;
        }else if(this.title=="人事审批"){
          this.hrIsDisabled = true;
          this.showRow = false;
        }else if(this.title=="销假"){
          this.suggestionIsDisabled = true;
          this.hrIsDisabled = true;
          this.resultIsDisabled = true;
          this.forceEndIsDisabled = true;
          this.showRow = false;
        }else if(this.title=="调整申请"){
          this.isReadonly = false;
          this.hrIsDisabled = true;
          this.suggestionIsDisabled = true;
          this.resultIsDisabled = true;
          this.forceEndIsDisabled = true;
          this.showRow = !this.showRow;
        }
        getLeaveApplyById(row.business_key).then(response => {
          this.form = response.data;
          this.form.task_id = row.task_id;
          this.open = true;
          this.optType = "edit";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(this.title=="部门领导审批"){
              leaderApproval(this.form).then(response => {
                this.$modal.msgSuccess("部门领导审批完成");
                this.open = false;
                this.getList();
              });
            }else if(this.title=="人事审批"){
              personnelApproval(this.form).then(response => {
                this.$modal.msgSuccess("人事审批完成");
                this.open = false;
                this.getList();
              });
              /*销假的功能只能是请假人自己进行销假,所以待办任务表中ASSIGNEE_字段为请假人*/
              /*系统以admin登录，待办列表中是看不见请假人的销假任务的*/
            }else if(this.title=="销假"){
              destroyApply(this.form).then(response => {
                this.$modal.msgSuccess("销假完成");
                this.open = false;
                this.getList();
              });
            }else if(this.title=="调整申请"){
              reApply(this.form).then(response => {
                this.$modal.msgSuccess("调整申请完成");
                this.open = false;
                this.getList();
              });
            }else if(this.title=="发起请假申请"){
              leaderApproval(this.form).then(response => {
                this.$modal.msgSuccess("发起请假申请完成");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /*撤销按钮,强制结束掉一个流程*/
      forceEnd(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            applyRevoke(this.form.task_id).then(response => {
              this.$modal.msgSuccess("撤销完成");
              this.open = false;
              this.getList();
            });
          }
        });
      }
    }
  };
</script>
